<template>
				<li>
					<div class="shownew">
						<i v-if="hasChild" class="iconfont" @click="toggle(model)"  v-bind:class="[open ? 'icon-jinru iconfontss': 'icon-jinru']"></i>
						<i v-if="!hasChild" class="icon file-text" @click="toggle(model)"></i>
						<span @click="changemsg(model)" class="newmsgclass">{{model[name]}}</span>
					</div>
					<div v-for="(item,index) in peosonlist" :key="index" style="padding-left:20px;" @click="getUser(item)" >{{item.userName}}</div>
					<ul v-show="open" v-if="hasChild" class="showul">
						<treemenu v-for="(item,index) in model.children"  :name="name" v-bind:model="item" v-bind:key="index"></treemenu>
					</ul>
				</li>
</template>
<script>
  export default {
    name: 'treemenu',
    props: ['model','name','type'],
    data () {
      return {
        open: false,
        index: 0,
        memberWork: '',
				 tree:null,
				 // isTree:true,
				 peosonlist:[],
      }
    },
    computed: {
      hasChild () {
				// debugger;
        return this.model.children && this.model.children.length
      }
    },
// 		render:(createElement)=>{
// 			// console.log(this.$slots.default)
// 			debugger;
// 			 return createElement(
// 			    'h1',
// 					"111"
// 				)
// 		},
    created () {
			 const parent = this.$parent;
			 if(!parent.isTree){
				 this.tree = parent.tree;
			 }else{
				 this.tree = parent;
				}
				// console.log(this.$vux)
        
    },
    methods: {
      toggle () {
        if (this.hasChild) {
          this.open = !this.open
        }
				if(this.open){
					 if(this.type=="people"){
						 this.peopleselect();
					 }
				}
      },
      getUser(item) {
        this.tree.$emit("getUser",item)
        },
      changemsg (data) {
					this.tree.$emit("nodeClick",data)
      },
			peopleselect(id){
				     // this.$vux.loading.show();
				  this.$axiosAjax.getUserList({departId:this.model.id}).then((res) => {
						   this.$vux.loading.hide();
				    if(res.data.success==true){
				       if(res.data.result.totalCount>0){
								   console.log(res.data.result)
									 this.peosonlist = res.data.result.items;
							 }
				    }
				  }).catch(
				    (err)=>{
				  
				    }
				  )
			}
    }
  }
</script>

<style>
  .showul {
    list-style: none;
     padding-left:20px;
  }
   .showul:last-child{

   }
  li {
    padding: 3px 0;
  }
   li:first-child{
   }
  li > span {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
  }

  i.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
  }

  .icon.folder {
  }

  .icon.folder-open {
  }

  .icon.file-text {
  }

  .tree-menu li {
    line-height: 3;
  }
  .iconfont{
    margin-right:5px;
  }
  .iconfont.iconfontss{
    display:inline-block;
    transform:rotate(90deg);
  }
  .shownew{
        overflow: hidden;
    height: 40px;
    padding-right: 20px;
        display: flex;
            align-items: center;
  }
  .newmsgclass{
        display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    overflow: hidden;

  }
</style>
